<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ page import="java.util.List"%>
<%@ page import="javax.jdo.PersistenceManager"%>
<%@ page import="com.google.appengine.api.users.User"%>
<%@ page import="com.google.appengine.api.users.UserService"%>
<%@ page import="com.google.appengine.api.users.UserServiceFactory"%>
<%@ page import="com.joe.rememberanything.model.Item"%>
<%@ page import="com.joe.rememberanything.dao.PMF"%>
<%@ page import="org.apache.commons.lang.StringUtils"%>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="/stylesheets/main.css" />
		<style type="text/css">
		</style>
		<script src="/javascript/jquery/jquery.js"></script>
		<script src="/javascript/jquery/plugins/eyecon/interface.js"></script>
		<script src="/javascript/jquery/plugins/eyecon/iutil.js"></script>
		<script src="/javascript/jquery/plugins/eyecon/idrag.js"></script>
		<script src="/javascript/jquery/plugins/eyecon/idrop.js"></script>
		<script type="text/javascript">
			$(function(){
				$('ul').Sortable(
					{
						accept : 		'sortableitem',
						helperclass : 	'sorthelper',
						activeclass : 	'sortableactive',
						hoverclass : 	'sortablehover',
						opacity: 		0.8,
						fx:				200,
						axis:			'vertically',
						opacity:		0.4,
						revert:			true
					}
				);
				/** it's not work well,you can drag it but you can not input characters now
				$('#grayTable').Draggable(
					{
						ghosting:	true,
						opacity:	0.5
					}
				);
				*/
			});
		function edit(id,title,content,labelID,state,position,status,level,createTime){
			alert(id+","+title+","+content+","+labelID+","+state+","+position+","+status+","+level+","+createTime);
			document.itemForm.cmd.value = "update";
			document.itemForm.id.value = id;
			document.itemForm.title.value = title;
			document.itemForm.content.value = content;
			document.itemForm.labelID.value = labelID;
			document.itemForm.state.value = state;
			document.itemForm.position.value = position;
			document.itemForm.status.value = status;
			document.itemForm.level.value = level;
		}
		</script>
	</head>
	<body>
<div id="navbar">
<div id="b-search">
    <table cellspacing="0" cellpadding="0" border="0" width="100%">
    	<tr>
    		<td nowrap="" valign="middle" align="right">
<%
    UserService userService = UserServiceFactory.getUserService();
    User user = userService.getCurrentUser();
    if (user != null) {
%>
	<%= user.getEmail() %> | <a style="text-decoration:none;"
	href="<%= userService.createLogoutURL("../item") %>">sign out</a>
<%
    } else {
%>
	<a style="text-decoration:none;" href="<%= userService.createLoginURL("../item") %>">Sign in</a>
<%
    }
%>
			</td>
		</tr>
	</table>
</div>
</div>
<div class="leftDiv">
<%
    List<Item> items = (List<Item>) request.getAttribute("items");
    if (items.isEmpty()) {
%>
There is no items to show.
<%
    } else {
%>
<ul class="sortul">
<%
		for (Item item : items) {
%>
	 
	<!--hr size="1" noshade="noshade" style="border: 1px #cccccc dashed;" /-->
	<li class="sortableitem">
		<div class="item" onmouseover="this.style.borderColor='#330066'" 
			onmouseout="this.style.borderColor='#FAEFE4'">
			<div class="level" <%if(item.getLevel().equals("4")){%>style="background-color:red;"<%}%> 
				onmouseover="this.style.borderColor='#fff'" 
				onmouseout="this.style.borderColor='#330066'">
			</div>
			<div class="content">
				<%=item.getTitle() %> -> 
				<%=StringUtils.trimToEmpty(item.getContent()) %>
			</div>
			<!--div class="delete" onmouseover="this.style.borderColor='red'" onmouseout="this.style.borderColor='#999999'"><a href="/item?cmd=delete&id=<%=item.getId() %>">delete</a></div-->
			<div class="edit" onmouseover="this.style.borderColor='red'" 
				onmouseout="this.style.borderColor='#999999'">
				<a href="javascript:edit('<%=item.getId()%>','<%=item.getTitle()%>','<%=item.getContent()%>','<%=item.getLabelID()%>','<%=item.getState()%>','<%=item.getPosition()%>','<%=item.getStatus()%>','<%=item.getLevel()%>','<%=item.getCreateTime()%>');">edit</a>
			</div>
			
		</div>
	</li>
<%
		}
%>
	</ul>
<%
    }
%>
</div>
<div class="rightGrayTableDiv" id="rightGrayTableDiv">
<form action="/item" method="post" name="itemForm">
<input type="hidden" name="cmd" value="newItem"/>
<input type="hidden" name="id"/>
<table class="grayTable" id="grayTable">
<tr>
	<th>title:</th>
	<td><input type="text" name="title"/></td>
</tr>
<tr>
	<th>content:</th>
	<td>
		<textarea name="content" cols="15" rows="3"></textarea>
	</td>
</tr>
<tr>
	<th>label</th>
	<td>
		<select name="labelID">
			<option value="work">work</option>
			<option value="personal">personal</option>
			<option value="programming">programming</option>
			<option value="RA">RA</option>
		</select>
	</td>
</tr>
<tr>
	<th>state</th>
	<td>
		<select name="state">
			<option value="0" selected="selected">not beginning</option>
			<option value="1">complete</option>
			<option value="2">doing</option>
		</select>
	</td>
</tr>
<tr>
	<th>position</th>
	<td><input type="text" name="position"/></td>
</tr>
<tr>
	<th>status</th>
	<td>
		<select name="status">
			<option value="0">private</option>
			<option value="1" selected="selected">public</option>
		</select>
	</td>
</tr>
<tr>
	<th>level</th>
	<td>
		<select name="level">
			<option value="1">priority 1</option>
			<option value="2">priority 2</option>
			<option value="3" selected="selected">priority 3</option>
			<option value="4">priority 4</option>
			<option value="5">priority 5</option>
		</select>
	</td>
</tr>
<tr>
	<td colspan="2" align="center">
		<input type="submit" value="submit"/>
		<input type="reset" value="reset"/>
	</td>
</tr>
</table>
</form>
</div>

</body>
</html>